/// 组件 * CRUD Demo Tsx * 弹框-详情

import type { Loading, ModalProps } from '@expresso/plus'
import { OPTIONS_GROUP, OPTIONS_SYSTEM } from '../../helpers'
import { type SiteDetail, apiQuerySite } from '@/apis/system/project/Site'

//# 类型

type DetailModalProps = ModalProps<{
  id?: number
}>

type DetailType = SiteDetail

export type { DetailModalProps }

//# 定义

export default genComponent<DetailModalProps>(
  {
    name: 'DetailModal',
    props: [...modalPropsKeys],
  },
  (props) => {
    //# 成员

    /** 加载器 */
    const loading = inject<Loading>(ExDialogContextKeys.loading)!

    /** 详情 */
    const detail = shallowRef<DetailType>()

    //# 周期
    onMounted(() => {
      loading(async () => {
        detail.value = await apiQuerySite(props.params!.id!)
      })
    })

    //# 渲染

    return () => (
      <ExModal width={680} footer>
        {/* 详情 */}
        <ExDescriptions>

          {/* 详情项-站点名称 */}
          <ExDescriptions.Item label="站点名称">
            {detail.value?.siteName}
          </ExDescriptions.Item>
          {/* 详情项-所属系统 */}
          <ExDescriptions.Item label="所属系统">
            {findOption(OPTIONS_SYSTEM, detail.value?.systemId)?.label}
          </ExDescriptions.Item>

          {/* 详情项-所属分组 */}
          <ExDescriptions.Item label="所属分组">
            {findOption(OPTIONS_GROUP, detail.value?.groupId as any)?.label}
          </ExDescriptions.Item>

          {/* 详情项-备注 */}
          <ExDescriptions.Item label="备注" span={2}>
            {detail.value?.remarks}
          </ExDescriptions.Item>
        </ExDescriptions>
      </ExModal>
    )
  },
)
